<template>
    <div class="constrBox">
      <search-title></search-title>
        <loading v-if="loadingShow" loadingStyle="height: 700px"></loading>
        <section class="wrap modeInfoBox" v-else>
            <div class="modeCrumbs">
              <router-link to="/budget" tag="span"  v-text="this.typeMsg[infoMsg.type]" :key="infoMsg.type">
                </router-link>
                <router-link :to="{name:'budget',params:{id:infoMsg.cat_id1.id}}" tag="span" v-if="infoMsg.cat_id1.catname" v-text="'>'+infoMsg.cat_id1.catname" :key="infoMsg.cat_id1.id"></router-link>
                <router-link :to="{name:'budget',params:{id:infoMsg.cat_id1.id,itemChild:infoMsg.cat_id2.id}}" tag="span" v-if="infoMsg.cat_id2.catname" v-text="'>'+infoMsg.cat_id2.catname" :key="infoMsg.cat_id2.id"></router-link>
                <span v-text="'>'+infoMsg.title"></span>
            </div>
            <div class="clearfix">
                <div class="modeInfoLeft">
                  <!-- <div class="vipFree" v-show="infoMsg.is_vip"></div> -->
                    <swiper :options="swiperOption" ref="mySwiper" class="modeBanner swiper-no-swiping">
                        <swiper-slide v-for="(item,index) in infoMsg.images" :key="index" class="uploadImgBox">
                          <img :ref="item" @load="getWh(item)" :src="$store.state.AuthUser.imgAfter+'/original/'+item" alt=""></swiper-slide>
                        
                    </swiper>
                    <span class="btnLeft swiper-button-prev"></span>
                    <span class="btnRight swiper-button-next"></span>
                    <div class="swiper-pagination modeIcon"></div>
                    <div class="modeIcon clearfix">
                       <img v-for="(item,index) in infoMsg.images" :src="$store.state.AuthUser.imgAfter+'/small/'+item"  alt="" :key="index">
                     </div>
                </div>
                
                <div class="modeInfoRight">
                    <div class="modeMsg">
                        <h4 :title="infoMsg.title">{{cutString(infoMsg.title,60)}}</h4>
                        <div class="infoItemPrompt modeUserInfo">
                            <span class="infoItemId">ID:&nbsp;<span>{{infoMsg.id}}</span></span> 
                            <div style="float:right;padding-right:20px">
                                <span><i class="browseIcon"></i>
                                        {{infoMsg.viewnum}}
                                    </span> 
                                <span><i class="downloadNum"></i>
                                      {{infoMsg.downnum}}
                                </span> 
                                <span><i class="collNum"></i>
                                    {{infoMsg.collecnum}}
                                </span>
                              </div>
                        </div>
                        <p class="modeUserTitle">
                            <router-link :to="{path:'/author',query:{id:infoMsg.userinfo.user_id}}">
                                <img :src="infoMsg.userinfo.avatar" alt="">
                                <span>{{infoMsg.userinfo.name}}</span>
                            </router-link>
                        </p>
                        <div class="modeInfoList">
                            <p>
                                 <span> <i class="ramSizeIcon"></i> {{infoMsg.filesize}}</span>
                            </p>
                            <p>
                                 <span> <i class="sortIcon"></i>{{infoMsg.cat_id1.catname}} {{infoMsg.cat_id2.catname}}</span>
                            </p>
                        </div>
                        <div class="rightBtn clearfix">
                          <!-- <button class="customized" @click="mask">
                              实物定制
                          </button> -->
                           <button class="keepBtn">
                              <!-- <i class="collBotton activeCollBotton"></i>收藏 -->
                              <i class="collBotton" :class="{'activeCollBotton':isInArray(infoMsg.id)}"></i>
                            {{isInArray(infoMsg.id)?"已收藏":"收藏"}}
                          </button>
                          <button class="transaction" @click="confirmDownload(infoMsg.id,infoMsg.title,infoMsg.coins)">
                              <i class="downloadIcon"></i>{{infoMsg.coins}} 交易币
                          </button>
                      </div>
                    </div>
                    
                </div>
            </div>
            <div class="clearfix explainBox">
                <div class="explain">
                    <h4>使用说明</h4>
                    <ul class="explainMsg">
                        <li>您在找到合适的模型后，点击下载，成功支付交易币后，会下载压缩包到电脑；</li>
                        <li>使用和模型标注相同的CAD版本即可打开模型文件；</li>
                        
                    </ul>
                </div>
            </div>
        </section>
        
    </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import searchTitle from '../searchTitle/searchTitle'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'

export default {
  name: "modeInfo",
  data() {
    return {
      loadingShow:true,
      typeMsg:["","3D模型","SU模型","施工图","概念方案","预算方案","材质贴图","高清案例"],
      msg: "我是模型详情",
      maskShow : false,
      modeType:"5",
      swiperOption: {
        prevButton: ".swiper-button-prev", //上一张
        nextButton: ".swiper-button-next", //下一张
        pagination: '.swiper-pagination',//点击页码切换
        paginationClickable :true,//点击页码切换
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      domains: [
        {
          value: ""
        }
      ],
      diyStyle:{//弹窗的位置
          top: "100px",
          left: "600px"
      },
     infoMsg : {//详情信息
                "id": "",
                "type": "",
                "user_id": "",
                "title": "Curt Kessler PhD",
                "file": "/model/1.rar",
                "coins": "",
                "filesize": "209M",
                "images": [
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690",
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540803416348&di=ee0ec4229aebfcbcd258ddf2efa75327&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fmw690%2F001mWx81gy6GMysWYCN05%26690"
                ],
                "appversion": "",
                "renderertype": "",
                "cat_id1": "",
                "cat_id2": "",
                "style": "",
                "is_light": "无",
                "status": "",
                "viewnum": "",
                "collecnum": "",
                "downnum": "",
                "created_at": {
                    "date": "",
                    "timezone_type": "",
                    "timezone": ""
                }
        },
    };
  },
  methods: {
     confirmDownload(id,name,money) {
       if(this.$store.state.AuthUser.userInfo){
        this.$Modal.confirm({
                title: '提示',
                content: '<p>确认下载?</p>',
                loading: false,
                draggable : true,
                scrollable:true,
                onOk: () => {
                    this.actionDownload(id,name,money)
                }
            });
      }else{
          this.loginShow();
      }
            
            
        },
    getWh(ele){
      if(this.$refs[ele][0].clientWidth<this.$refs[ele][0].clientHeight){
        this.$refs[ele][0].setAttribute("class","modeBannerH");
        this.$refs[ele][0].style.opacity = 1;
      }else{
        this.$refs[ele][0].setAttribute("class","modeBannerW");
        this.$refs[ele][0].style.opacity = 1;
      }
    },
     ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        cutString(str, len) {
        //length属性读出来的汉字长度为1
        if(str.length*2 <= len) {
            return str;
        }
        var strlen = 0;
        var s = "";
        for(var i = 0;i < str.length; i++) {
            s = s + str.charAt(i);
            if (str.charCodeAt(i) > 128) {
                strlen = strlen + 2;
                if(strlen >= len){
                    return s.substring(0,s.length-1) + "...";
                }
            } else {
                strlen = strlen + 1;
                if(strlen >= len){
                    return s.substring(0,s.length-2) + "...";
                }
            }
        }
        return s;
    },
    errorWarning(msg,n) {
      var This = this;
      this.$message({
            message: msg,
            type: 'error',
            customClass : 'downLoadError',
            duration : 2000,
            showClose : true,
            onClose:function () {
                if(n){
                    let routeData = This.$router.resolve({ path: '/recharge'});
                    window.open(routeData.href, '_blank');
                }
            }
        });
    }, 
    actionDownload(id,name,money){//点击下载
        axios({
            method: 'get',
            url: '/downdata/'+id,
            // responseType: 'blob'
        }).then(response => {
            // return;
            if(response.data.status=="1"){
                // window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
            }else if(response.data.status=="0"){
                this.errorWarning('交易币不足，请充值后再进行下载...',true);
            }
         }).catch((error) => {
              this.errorWarning("下载失败",false);
          }) 
    },
     download (data,name) {//下载要执行的函数
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(data);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', name+'.rar');
            document.body.appendChild(link);
            link.click();
        },
    getContent(value, content) {
      $("#province option").each(function(i, e) {
        if ($(e).val() == value) {
          number = i;
        }
      });
    },
    //遮罩的显示与隐藏
    mask(){
        this.maskShow = true;
    },
    maskHide () {
        this.maskShow = false;
    },
    diyMaskPosition(){
        this.diyStyle.left = (document.body.offsetWidth - 547)/2 +"px";
        this.diyStyle.top = (document.documentElement.clientHeight - 629)/2 +"px";
    },
    isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               if(this.modeType!="7"){
                arr = this.user.userInfo.data.datacollects;
                }else{
                    arr = this.user.userInfo.data.articlecollects;
                }
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        }
  },
  mounted(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    this.diyMaskPosition();
    /* window.onresize = ()=>{
        this.diyMaskPosition();
    } */
  },
  components:{
    searchTitle,
    loading
  },
  created(){
       document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        axios.get('/info/'+this.$route.params.modeId+"/getInfo").then(response => {
          
            this.infoMsg = response.data.data;
            this.loadingShow = false;
        })
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
           
        
    },
};
</script>

<style scope>
.modeInfoList i{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: top;
}
.styleIcon{
  background: url(./img/styleIcon.png) no-repeat center;
}
.versionIcon{
  background: url(./img/versionIcon.png) no-repeat center;
}
.ramSizeIcon{
  background: url(./img/ramSize.png) no-repeat center;
}
.uploadIcon{
  background: url(./img/uploadTime.png) no-repeat center;
}
.sortIcon{
  background: url(./img/sortIcon.png) no-repeat center;
}
.depictIcon{
  background: url(./img/depict.png) no-repeat top center;
}
.browseIcon,.downloadNum,.collNum{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: top;
  margin-left: 5px;
}
.browseIcon{
  background: url(./img/browseNum.png) no-repeat top center;
}
.downloadNum{
  background: url(./img/downloadNum.png) no-repeat top center;
}
.collNum{
  background: url(./img/collNum.png) no-repeat top center;
}
.rightBtn i{
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: top;
  margin-top: 10px;
}
.collBotton{
  background: url(./img/collBottom.png) no-repeat center;
}
.downloadIcon{
  background: url(./img/hoverDownloads.png) no-repeat center;
}
.activeCollBotton{
  background: url(./img/collActive.png) no-repeat center;
}
@import "../../css/global.css";
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
.close{
    position: absolute;
    right: 20px;
    top: 20px;
}
.close button{
    background: transparent;
    padding: 0;
    border: none;
    outline: none;
    font-size: 16px;
}
.applyDiy{
    margin-top: 66px;
    text-align: center;
}
.applyDiy button{
    width: 270px;
    height: 50px;
    background: #ea514b;
    outline: none;
    font-size: 18px;
    line-height: 50px;
    color: #fff;
    border: none;
    padding: 0;
}
.applyDiy p{
    font-size: 12px;
    line-height: 46px;
    color: #818181;
    text-align: left;
    padding-left: 72px;
}
.applyDiy p span{
    color: #e6b250;
}
.maskBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
}
.codeBtn{
    display: inline-block;
    width: 135px;
    height: 40px;
    background: #e3aa3f;
    font-size: 14px;
    line-height: 40px;
    color: #fff;
    padding:0;
    border: none;
    margin-left: 7px;
    outline: none;
}
label{
    float: left;
    vertical-align: top;
    width: 70px;
    text-align: left;
    font-size: 14px;
    line-height: 40px;
}
.el-message-box {
  width: 547px;
  height: 650px;
}
.objectBox {
  width: 547px;
  height: 629px;
  /* margin: 240px auto 0; */
  background: #fff;
  padding: 29px 56px 12px 80px;
  box-sizing: border-box;
  position: absolute;
}
.objectBox header {
  font-size: 18px;
  line-height: 44px;
  font-weight: bold;
  text-align: center;
}
.diyProcess {
  font-size: 14px;
  line-height: 42px;
  color: #3d3d3d;
}
.diyProcess span {
  position: relative;
}
.diyProcess span i {
  position: absolute;
  width: 58px;
  height: 6px;
  bottom: 0;
  left: 0;
  background: rgba(277, 170, 63, 0.45);
}
.rightContent .infoList {
  height: 36px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 36px;
  position: relative;
}
.prompt {
  font-size: 12px;
  color: red;
  position: absolute;
  right: 10px;
  top: 3px;
  display: none;
}
.infoList .infoTitle {
  display: inline-block;
  width: 150px;
  text-align: right;
  vertical-align: top;
}
/*.infoList select{
	outline: none;
	line-height: 26px;
	padding: 2px;
	width: 122px;
}*/
.infoList input,
.infoList textarea {
  outline: none;
  font-size: 14px;
  line-height: 40px;
  font-family: "思源黑体";
  padding: 0 8px;
  width: 298px;
  border: 1px solid #dddddd;
  /* border-radius: 4px; */
  color: #666;
  box-sizing: border-box;
}
textarea {
  resize: none;
  height: 70px;
  /*text-indent: 2em;*/
}
.button {
  width: 359px;
  height: 46px;
  background: #f4a902;
  border: 1px solid #f69e00;
  border-radius: 4px;
  text-align: center;
  margin-top: 37px;
  font-size: 20px;
  line-height: 46px;
  color: #fff;
  font-family: "思源黑体";
  outline: none;
}
.rightContent {
  margin-top: 23px;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: #999;
}
textarea::-moz-placeholder,
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}
textarea:-moz-placeholder,
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
}

.cityParent {
  position: relative;
}
.select {
  float: left;
  /*用div的样式代替select的样式*/
  width: 220px;
  height: 40px;
  border-radius: 5px;
  /*盒子阴影修饰作用,自己随意*/
  /*box-shadow: 0 0 5px #ccc;*/
  position: relative;
}
select {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  width: 154px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #999;
  border: 1px solid #dddddd;
  /* border-radius: 4px; */
  /*隐藏select的下拉图标*/
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /*通过padding-left的值让文字居中*/
  padding-left: 8px;
}
/*使用伪类给select添加自己想用的图标*/
.select:after {
  content: "";
  width: 14px;
  height: 8px;
  background: url(../../img/xia.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: -26px;
  top: 14px;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}
.modeCrumbs {
  font-size: 16px;
  line-height: 48px;
  color: #333333;
  margin-top: 10px;
  padding-left: 15px;
}
.modeCrumbs span{
  cursor:pointer;
}
.modeInfoLeft {
  float: left;
}
.modeInfoRight {
  float: right;
}
.modeInfoLeft .modeBanner {
  width: 763px;
  height: 607px;
  background: #fff;
  /* padding: 61px 0 49px 0; */
  box-sizing: border-box;
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
  position: relative;
  margin-bottom: 20px;
}
.modeBanner .modeBannerW {
  width: 100%;
  /* height: 497px; */
  display: block;
  margin-top: 61px;
}
.modeBanner .modeBannerH{
  width: auto;
  height: 606px;
  margin-top: 0;
  margin: 0 auto;
  display: block;

}
.modeInfoLeft {
  position: relative;
}

.modeInfoLeft .btnLeft,
.modeInfoLeft .btnRight {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 283px;
  cursor: pointer;
  outline: none;
}
.btnLeft {
  left: 0!important;
  background: url(../../img/prevactive.png) no-repeat!important;
  background-size: 0;
}
.btnLeft:hover {
  background: url(../../img/prev.png) no-repeat;
}
.btnRight {
  right: 0!important;
  background: url(../../img/nextactive.png) no-repeat!important;
  background-size: 0;
}
.btnRight:hover {
  background: url(../../img/next.png) no-repeat;
}
.modeIcon span {
  /* display: block; */
  float: left;
  width: 128px;
  height: 101px;
  margin-right: 9px;
}
.modeIcon img {
  display: block;
  float: left;
  width: 127px;
  height: 100px;
  margin-right: 10px;
}
.modeMsg {
  width: 386px;
  height: 607px;
  background: #fff;
  padding-left: 9px;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
}
.modeMsg .infoItemPrompt{
  position:static;
  text-align: left;
  
}
.modeMsg .infoItemPrompt span{
  margin-left: 5px;
}
.modeMsg .infoItemPrompt span:nth-of-type(1){
  margin-left: 5px;
}

/* .constrBox .modeUserInfo{
  padding-left: 15px;
} */
.infoItemPrompt .infoItemId{
  color: #898989;
  margin-right: 0px;
  font-weight: bold;
}
.modeMsg h4 {
  font-size: 18px;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 20px;
  color: #353535;
  font-weight: bold;
  margin-bottom: 10px;
  height: 60px;
}
.modeUserInfo {
  padding-left: 20px;
}
.modeUserTitle {
  height: 70px;
  padding: 13px 0 13px 20px;
  box-sizing: border-box;
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  /* margin-top: 17px; */
}
.modeUserTitle img {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  vertical-align: middle;
}
.modeUserTitle span {
  display: inline-block;
  font-size: 14px;
  line-height: 42px;
  margin-left: 15px;
  vertical-align: middle;
  color: #333333;
}
.modeInfoList {
  padding-left: 28px;
  padding-top: 8px;
  padding-bottom: 11px;
  /* border-bottom: 1px solid #f6f6f6; */
  vertical-align: middle;
}
.modeInfoList p span {
  font-size: 16px;
  line-height: 32px;
  color: #434343;
}
.modeInfoList p span i{
  font-size: 24px;
  line-height: 32px;
  color: #999999;
  margin-right: 5px;
  vertical-align: middle;
}
.modeMsg .modeInfoList .describe span{
  font-size: 14px;
  line-height: 24px;
  color: #3c3c3c;
  margin-top: 3px;
  margin-left: 3px;
  float: left;
  width: 290px;
}
.constrBox .rightBtn {
  text-align: center;
  position:absolute;
  bottom: 25px;
}
.rightBtn button {
  width: 325px;
  height: 44px;
  font-size: 18px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  padding: 0;
  border: none;
  outline: none;
  text-align: center;
  /* box-shadow: 0px 0px 5px rgba(200,200,200,0.5); */
}
.customized{
  float: left;
  color: #fff;
  background: #e6b861;
  border-radius: 0;
}
.transaction {
  /* float: right; */
  background: #ff5f5c;
}
.transaction i{
  margin-right: 10px;
}
.transactionIcon {
  display: inline-block;
  margin-right: 7px;
  width: 21px;
  height: 20px;
  vertical-align: middle;
  background: url(../../img/downIcon.png) no-repeat;
}
.modeInfoBox .explainBox {
  margin-top: 16px;
  margin-bottom: 42px;
  padding-left: 0;
  padding-bottom: 0;
}
.explain {
  float: left;
  width: 843px;
  height: 150px;
  /* background: #fff; */
  /* box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08); */
  margin-top: 9px;
  font-size: 18px;
  line-height: 48px;
  color: #333333;
}
.explainBox h4 {
  /* padding-left: 27px; */
}
.modeInfoBox .explainBox li {
  font-size: 14px;
  line-height: 32px;
  color: #757575;
  padding-left: 10px;
  background: url(../../img/spot.png) no-repeat 0px 14px;
}
.service {
  float: right;
  margin-top: 9px;
  font-size: 18px;
  line-height: 48px;
  width: 306px;
  height: 270px;
  background: #fff;
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
}
.service button {
  font-size: 14px;
  line-height: 46px;
  color: #e3aa3f;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin-left: 40px;
}
.modeIcon .swiper-pagination-bullet {
  background: transparent!important;
  outline: none;
}
.swiper-pagination-bullet-active {
  border: 1px solid #e3aa3f;
  border-radius: 0;
}
.swiper-pagination {
  margin-left: -1px;
}
.describe i{
    float: left;
    height: 90px;
    margin: 3px 12px 0 2px;
    font-size: 20px;
    line-height: 32px;
    color: #999999;
    margin-right: 5px;
}
.rightBtn .keepBtn i{
  font-size: 20px;
  line-height: 40px;
  margin-right: 12px;
}
.rightBtn .keepBtn{
  width: 323px;
  height: 41px;
  background: #eeeeee;
  color: #f25954;
  border: 1px solid #dddddd;
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 40px;
  font-family: "黑体";
}
.rightBtn .keepBtn:hover{
    background: #e0dddd;
}
.transaction:hover{
  background: #ec817c;
}
.vipFree{
  position: absolute;
  top: 0;
  left: -2px;
  width: 137px;
  height: 137px;
  background: url(../../img/bigVip.png) no-repeat 0 0;
  z-index: 9;
}
</style>
